<template>
    <div class="recover-box">
      <div class="recover">
        <div class="header">
          <h1>用户找回</h1>
        </div>
        <div id="recover_form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              type="text"
              class="form-control"
              id="username"
              name="username"
              v-model="username"
              placeholder="请输入用户名"
            />
          </div>
          <div class="form-group">
            <label for="phonenumber">手机号</label>
            <input
              type="text"
              class="form-control"
              id="phonenumber"
              name="phonenumber"
              v-model="phonenumber"
              placeholder="请输入手机号"
            />
          </div>
          
          <div class="form-group">
            <label for="password">新密码：</label>
            <input
              type="password"
              class="form-control"
              id="password"
              name="password"
              v-model="password"
              placeholder="请输入密码"
            />
          </div>
          <div class="form-group">
            <label for="verifyPassword">确认密码：</label>
            <input
              type='password'
              class="form-control"
              id="verifyPassword"
              name="verifyPassword"
              v-model="verifyPassword"
              placeholder="请输入密码"
            />
            
          </div>
          <div class="form-group">
            <label for="verificationCode" >手机验证码：</label>
            <input
              style="width: 140px"
              type="verificationCode"
              class="form-control"
              id="verificationCode"
              name="verificationCode"
              v-model="verificationCode"
              placeholder="请输入验证码"
            />
            <button class="btn btn-success btn-block"  style="width: 140px;margin-top: 15px;" @click="sendVerificationCode">
              {{content}}
          </button>
          </div>
          <button class="btn btn-success btn-block" @click="verifyCode" >
            确认
          </button>
          <!-- <input type="submit" value="tijiao" /> -->
        </div>
        <div class="message">
          <p><router-link to="/login">返回登录</router-link></p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { userRegister } from "../api/user";
  export default {
    data() {
      return {
        username: "",
        password: "",
        verifyPassword: "",
        verifyWord: "",
        phonenumber: '',
        verificationCode: '',
        content: '发送验证码',
        totalTime: 10,
        canClick: true //添加canClick
  }


    },
    methods: {
      verifyCode() {
        if (this.username == "") {
          alert("用户名不能为空");
          return;
        } else if (this.password == "") {
          alert("密码不能为空");
          return;
        } 
        else if (this.verifyPassword == "") {
          alert("请确认密码");
          return;
        }
        else if (this.verifyPassword !== this.password) {
          alert("两次密码不相同");
          return;
        }
        else if (this.verificationCode == "") {
          alert("验证码不能为空");
          return;
        }
        
       
        // 发送请求到后端验证验证码的接口
      axios.post('http://localhost:9090/verifyCode', {
        phoneNumber: this.phonenumber,
        verificationCode: this.verificationCode,
        userName: this.username,
        passWord: this.password
      })
      .then(response => {
        // 处理成功响应
        console.log(response.data);
      })
      .catch(error => {
        // 处理错误响应
        console.error(error);
      });
    },
      sendVerificationCode() 
      {
        // 测试倒计时如下
        // this.countDown()
      // 发送请求到后端发送验证码的接口
      console.log("===================",this.username)
      axios.post('http://localhost:9090/sendVerificationCode', {
        phoneNumber: this.phonenumber,
        //userName: this.username,
        //passWord: this.password
      })
      .then(response => {
        // 处理成功响应
        console.log(response.data);
      })
      .catch(error => {
        // 处理错误响应
        console.error(error);
      });
      this.countDown()
    },

      countDown () {
        if (!this.canClick) return  //改动的是这两行代码
        this.canClick = false
        this.content = this.totalTime + 's后重新发送'
        let clock = window.setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {
            window.clearInterval(clock)
            this.content = '重新发送验证码'
            this.totalTime = 10
            this.canClick = true  //这里重新开启
          }
        },1000)
      }
    },
    created() {},
  };
  </script>
  
  <style lang="less" scoped>
  @import url("../../node_modules/bootstrap/dist/css/bootstrap.css");
  body {
    background-color: #f9f9f9;
  }
  .recover-box {
    box-sizing: border-box;
    // width: 1897px;
    height: 800px;
    padding-top: 150px;
    background: url("../assets/img/rice.png");
    background-size: 1897px 920px;
    .recover {
      width: 340px;
      margin: 0 auto;
      color: #333;
      .header {
        height: 40px;
        text-align: center;
        h1 {
          margin: 0;
          font-size: 26px;
          color: white;
        }
      }
      #recover_form {
        padding: 20px;
        margin-bottom: 15px;
        border: 1px solid #d8dee2;
        border-radius: 5px;
        background-color: #fff;
      }
      .message {
        padding: 10px;
        padding-bottom: 0;
        color: white;
        border: 1px solid #d8dee2;
        border-radius: 5px;
        text-align: center;
      }
    }
  }
  </style>